|
html代码
在线聊天
.msg_board {
width: 322px;
margin-left: 20px;
height: 100px;
border: solid 1px darkcyan;
padding: 5px;
overflow-y: scroll;
// 文字长度大于div宽度时换行显示
word-break: break-all;
}
/*set srcoll start*/
::-webkit-scrollbar
{
width: 10px;
height: 10px;
background-color: #D6F2FD;
}
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
/*border-radius: 5px;*/
background-color: #D6F2FD;
}
::-webkit-scrollbar-thumb
{
height: 20px;
/*border-radius: 10px;*/
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #89D7F7;
}
.mingzi{
width:95px;
}
.kuan{
float:left;
width:330px;
}
/* .layui-form-label {
text-align: left;
} */
.liaotext{
width: 330px;
margin-top: 10px;
/* margin-left: 120px; */
height: 80px;
}
.fasong {
width: 280px;
font-size: 20px;
letter-spacing: 5px;
margin-left: 40px;
}
.jinru {
width: 160px;
font-size: 20px;
letter-spacing: 2px;
margin-left: 60px;
background-color: #009619;
}
.tuichu {
width: 160px;
font-size: 20px;
letter-spacing: 2px;
margin-left: 40px;
background-color: #966100;
}
.ltstyle {
width: 500px;
height: 600px;
padding-top: 20px;
margin-top: 20px;
margin-left: 20px;
border: 1px red solid;
background-color: #a6c45d;
}
.yinchang{
width: 60px;
font-size: 20px;
margin-left: 40px;
}
.xianshi{
width: 120px;
font-size: 20px;
letter-spacing: 3px;
margin-left: 40px;
}
#xianbutton{
display: none;
}
在线聊天
进入聊天室
退出聊天室
X
房间号 :
用户学号 :
用户角色 :
聊天内容展示 :
聊天信息 :
发送
//显示在线聊天框
function xianopen() {
//隐藏在线聊天按钮
var xianbutton = document.getElementById('xianbutton');
xianbutton.style.display = "none";
//显示在线聊天框
var ltbody = document.getElementById('ltbody');
ltbody.style.display = "block";
}
//隐藏在线聊天框
function yinclose() {
//显示在线聊天按钮
var xianbutton = document.getElementById('xianbutton');
xianbutton.style.display = "block";
//隐藏在线聊天框
var ltbody = document.getElementById('ltbody');
ltbody.style.display = "none";
}
$(function() {
//房间号
var roomxinHao="2";
//学生号
var roomxinStudent="";
//学生角色
var roomxinJuese="";
$.ajax({
type:"post",
url:"${pageContext.request.contextPath }/new/newRoomObject",
data:{roomxinHao:roomxinHao,roomxinStudent:roomxinStudent,roomxinJuese:roomxinJuese},
dataType:"json",
success:function(data){
//房间号
$("#input_roomName").val(roomxinHao);
//用户名
$("#uId").val(roomxinStudent);
//角色
$("#ujuese").val(roomxinJuese);
},
error:function(){
layui.use(['layer'],function(){
var layer = layui.layer;
layer.msg('出现异常');
});
}
});
})
var webSocket;
function send_msg() {
if (webSocket != null) {
//用户ID
var uId = document.getElementById('uId').value;
//用户角色
var ujuese = document.getElementById('ujuese').value;
//用户发送信息
var input_msg = document.getElementById("input_msg").value.trim();
if (input_msg == "") {
return;
}
webSocket.send('{"id":'+uId+',"ujuese":'+ujuese+',"message":"'+input_msg+'"}');
// webSocket.send(input_msg);
// 清除input框里的信息
document.getElementById("input_msg").value = "";
} else {
alert("您已掉线，请重新进入聊天室...");
}
};
//退出聊天
function closeWs() {
//用户名
var studentId = document.getElementById('uId').value;
console.log("===="+studentId); //这里是我的 div 元素。
// #ltMesssage 获取聊天内容
var myDiv = document.getElementById("ltMesssage");
var summaryContent = myDiv.innerHTML;
console.log("===="+summaryContent); //这里是我的 div 元素。
summaryContent=" "+summaryContent+" ";
$(function() {
$.ajax({
type:"post",
url:"${pageContext.request.contextPath }/new/newSummaryObject",
data:{studentId:studentId,summaryContent:summaryContent},
dataType:"json",
success:function(data){
//成功执行的方法
layui.use(['layer'],function(){
var layer = layui.layer;
layer.msg(data.msg,{icon:6,time:1000});
});
},
error:function(){
layui.use(['layer'],function(){
var layer = layui.layer;
layer.msg('聊天保存出现异常');
});
}
});
})
webSocket.close();
};
function initWebSocket() {
var roomName = document.getElementById("input_roomName").value;
// 房间名不能为空
if (roomName == null || roomName == "") {
alert("请输入房间名");
return;
}
if ("WebSocket" in window) {
// alert("您的浏览器支持 WebSocket!");
if (webSocket == null) {
//如果网站WEB使用HTTPS协议，那相应的WebSocket必须要使用wss协议
//使用wss协议的请求, 链接必须只能写域名，而非IP+端口
// var url = "wss://one.com/wave/chat/" + roomName;
var url = "ws://localhost:8080/wave/chat/" + roomName;
// 打开一个 web socket
webSocket = new WebSocket(url);
} else {
alert("您已进入聊天室...");
}
webSocket.onopen = function () {
alert("已进入聊天室，畅聊吧...");
};
//连接发生错误的回调方法
webSocket.onerror = function () {
alert("WebSocket连接发⽣错误");
};
webSocket.onmessage = function (evt) {
var msg_board = document.getElementsByClassName("msg_board")[0];
var received_msg = evt.data;
var old_msg = msg_board.innerHTML;
msg_board.innerHTML = old_msg + received_msg + "";
// 让滚动块往下移动
msg_board.scrollTop = msg_board.scrollTop + 40;
};
//退出聊天
webSocket.onclose = function () {
// 关闭 websocket，清空信息板
alert("连接已关闭...");
webSocket = null;
// document.getElementsByClassName("msg_board")[0].innerHTML = "";
};
}
else {
// 浏览器不支持 WebSocket
alert("您的浏览器不支持 WebSocket!");
}
}
后台代码
package com.controller;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.util.HashSet;
import java.util.Set;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.CopyOnWriteArraySet;
/**
* writer: holien
* Time: 2023-06-06 13:00
* Intent: webSocket服务器
*/
@ServerEndpoint("/chat/{roomName}")
public class WsServer {
// 使用map来收集session，key为roomName，value为同一个房间的用户集合
// concurrentMap的key不存在时报错，不是返回null
private static final Map rooms = new ConcurrentHashMap();
@OnOpen
public void connect(@PathParam("roomName") String roomName, Session session) throws Exception {
// 将session按照房间名来存储，将各个房间的用户隔离
if (!rooms.containsKey(roomName)) {
// 创建房间不存在时，创建房间
Set room = new HashSet();
// 添加用户
room.add(session);
rooms.put(roomName, room);
} else {
// 房间已存在，直接添加用户到相应的房间
rooms.get(roomName).add(session);
}
System.out.println("a client has connected!");
}
@OnClose
public void disConnect(@PathParam("roomName") String roomName, Session session) {
rooms.get(roomName).remove(session);
System.out.println("a client has disconnected!");
}
@OnMessage
public void receiveMsg(@PathParam("roomName") String roomName,
String msg, Session session) throws Exception {
int i1 = msg.indexOf(":");
System.out.println("i1===="+i1);
int i2 = msg.indexOf(",");
System.out.println("i2===="+i2);
//获取用户ID
String id=msg.substring(i1+1, i2);
System.out.println("id===="+id);
int i3 = msg.lastIndexOf(":");
System.out.println("i3===="+i3);
int i4 = msg.lastIndexOf("}");
System.out.println("i4===="+i4);
//获取用户聊天内容
String content=msg.substring(i3+2,i4-1);
//获取用户角色
String jueselength=msg.substring(i2+1,i4);
System.out.println("jueselength======"+jueselength);
int i5 = jueselength.indexOf(":");
System.out.println("i5===="+i5);
int i6 = jueselength.indexOf(",");
System.out.println("i6===="+i6);
//获取roomID
String ujuese=jueselength.substring(i5+1, i6);
// 此处应该有html过滤
//msg = session.getId() + ":" + msg;
msg=ujuese+"("+id+"):"+content;
System.out.println(msg);
// 接收到信息后进行广播
broadcast(roomName, msg);
}
/*
* 发生错误时调用
*
* @param session
*
* @param error
*
*/
@OnError
public void onError(Session session, Throwable error) {
System.out.println("发生错误");
error.printStackTrace();
}
// 按照房间名进行广播
public static void broadcast(String roomName, String msg) throws Exception {
for (Session session : rooms.get(roomName)) {
session.getBasicRemote().sendText(msg);
}
}
}
3.感谢你的浏览访问
工作几年，略有心得，然很少整理成文，平常工作中浏览了不少道友的好文章，受益良多。 顾也开始写一些文章， 希望能与各位道友分享进步 ！！！！ 如果有用，欢迎各位点赞评论，若有不足，亦可指正！！！
|